<template>
  <div>
    <el-card>
      <div class="geology">
        基本信息
      </div>
      <el-row class="spot-check-base2">
        <el-col :span="12">
          <p class="info-title">
            路线:<span class="info">{{ data.roadName}}</span>
          </p>
          <p class="info-title">
            建设单位:<span class="info">{{ data.buildUnitName}}</span>
          </p>
          <p class="info-title">
            监理单位:<span class="info">{{ data.supervisorUnitName}}</span>
          </p>
          <p class="info-title">
            抽查单位:<span class="info">{{ data.checkUnitName}}</span>
          </p>
          <p class="info-title">
            抽查日期:<span class="info">{{ data.checkTime | formatTimer2}}</span>
          </p>
        </el-col>
        <el-col :span="12">
          <p class="info-title">
            标段:<span class="info">{{ data.roadSectionName}}</span>
          </p>
          <p class="info-title">
            施工单位:<span class="info">{{ data.constructionUnitName}}</span>
          </p>
          <p class="info-title">
            受检单位:<span class="info">{{ data.beCheckedUnitName}}</span>
          </p>
          <p class="info-title">
            抽查人:<span class="info">{{ data.checkUserName}}</span>
          </p>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="kaoheneirong">
      <div class="geology">
        考核内容
      </div>
      <div class="assessment-info">
        <el-table border :data="data.itemList" class="m-t-24" :span-method="objectSpanMethod">
          <el-table-column label="考核类别" width="190" prop="group"></el-table-column>
          <el-table-column label="考核项目" prop="name"></el-table-column>
          <el-table-column label="扣分标准" width="95" prop="standard"></el-table-column>
          <el-table-column label="考核评分"  prop="score" width="100px"></el-table-column>
        </el-table>
        <el-row class="shuoming">
          <el-col :span="16"><span style="color: gray">注：①优：90-100分；②良：80-89分；③中:60-79分；③差：0-59分。</span></el-col>
          <el-col :span="4">总分：<span style="font-size: 20px;color: green">{{data.score}}</span></el-col>
          <el-col :span="4">等级：<span style="font-size: 20px;color: red">{{data.checkLevel}}</span></el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
import ItemMixins from "../../modules/item.mixins";
import constUrl from '@/services/env'

export default {
  props: ['value', 'data'],
  mixins: [ItemMixins],
  data() {
    return {
      // 单位信息表单 校验规则
      constUrl,
    }
  },
  computed: {},
  methods: {  //合并排查项
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex === 2) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else if (rowIndex === 7) {
          return {
            rowspan: 6,
            colspan: 1
          };
        } else if (rowIndex === 13) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
  }
  ,
  mounted() {
    // console.log(this.data)
  }
  ,
  created() {
  }
  ,
  activated() {
  }
}
</script>

<style lang="less">
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 205px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .m-t-24 {
    margin-top: 10px;

    td, th {
      padding: 5px 0;
      font-size: 13px;
    }

    .el-button--text {
      color: red;
    }
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .collapse .title {
    padding: 0 20px !important;
  }

  .kaoheneirong {
    margin-top: 20px;

    .el-collapse .el-collapse-item__header {
      font-size: 20px;
      border-bottom: 1px solid;
    }
  }

  .assessment-info {
    .el-col {
      text-align: center;
    }

    .el-form-item__content {
      margin-left: 0px !important;
    }

    .shuoming {
      margin-top: 20px;
      font-size: 17px;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .el-input__inner {
      height: 30px;
    }
  }

  .spot-check-base2 {
    padding: 20px;
    .info-title {
      font-size: 17px;
      color: #1990FE;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .info {
      font-size: 15px;
      margin-left: 20px;
      color: #8c939d;
    }
  }
</style>
